/**
 * Created by dell on 2017/6/15.
 */
import {
    StackNavigator,
    TabNavigator,
} from 'react-navigation';

import React from 'react';

import {
    Image,
    StyleSheet,
    Text,
    AsyncStorage
} from 'react-native';

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
import Icon from 'react-native-vector-icons/Ionicons';
import  colors  from './component/Colors';

import Shopping from './page/shop/Shopping';
import Nearby from './page/nearby/Nearby';
import OrderList from './page/order/OrderList';
import Person from './page/person/Person';

const Shoppingnormal = require('./img/tabbar/pfb_tabbar_homepage@2x.png');
const Shoppingpress = require('./img/tabbar/pfb_tabbar_homepage_selected@2x.png');
const Nearbynormal = require('./img/tabbar/pfb_tabbar_merchant@2x.png');
const Nearbypress = require('./img/tabbar/pfb_tabbar_merchant_selected@2x.png');
const OrderListnormal = require('./img/tabbar/pfb_tabbar_order@2x.png');
const OrderListpress = require('./img/tabbar/pfb_tabbar_order_selected@2x.png');
const Personnormal = require('./img/tabbar/pfb_tabbar_mine@2x.png');
const Personpress = require('./img/tabbar/pfb_tabbar_mine_selected@2x.png');
const backicon = require('../app/resources/login_back.png');


const MyTab = TabNavigator({
        Shopp: {
            screen: Shopping,
            navigationOptions: () => TabOptions('团购', Shoppingnormal, Shoppingpress, '团购'),
        },
        Near: {
            screen: Nearby,
            navigationOptions: () => TabOptions('附近', Nearbynormal, Nearbypress, '附近'),
        },
        Order: {
            screen: OrderList,
            navigationOptions: () => TabOptions('订单', OrderListnormal, OrderListpress, '订单'),
        },
        Persons: {
            screen: Person,
            navigationOptions: () => TabOptions('我的', Personnormal, Personpress, '我的'),
        },

    },
    {
        tabBarPosition: 'bottom',
        swipeEnabled: false,
        animationEnabled: false,
        backBehavior: 'none',
        lazy: true,
        tabBarOptions: {
            showIcon: true,
            labelStyle: {
                color: colors.text_color_gray_dark,
                fontSize: 10,
                marginTop:1

            },
            style: {
                backgroundColor: colors.bg_color,
                height: 50,
            },
            showLabel: true,
            pressOpacity: 0.3,
            indicatorStyle: {
                height: 0, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了
            }
        }
    });

const APP = StackNavigator({
    MyTab: {
        screen: MyTab,
        navigationOptions: {
            header: null
        }
    },
}, {
    headerMode: 'screen',
});

export const TabOptions = (tabBarTitle, normalImage, selectedImage, navTitle) => {
    // console.log(navigation);
    const tabBarLabel = tabBarTitle;
    const tabBarIcon = (({tintColor, focused}) => {
        return (
            focused
                ?
                <Image
                    source={selectedImage}
                    style={[styles.TabBarIcon]}
                />
                :
                <Image
                    source={normalImage}
                    style={[styles.TabBarIcon]}
                />
        )
    });
    const headerTitle = navTitle;
    const headerTitleStyle = {fontSize: 1, color: 'blue'};
    // header的style
    const headerStyle = {backgroundColor: 'blue'};
    return {tabBarLabel, tabBarIcon, headerTitle, headerTitleStyle, headerStyle};
};

const StackOptions = ({navigation}) => {
    // console.log(navigation);
    let {state, goBack} = navigation;
    const visible = state.params.isVisible;
    let header;
    if (visible === true) {
        header = null;
    }
    const headerStyle = {backgroundColor: 'blue'};
    const headerTitle = state.params.title;
    const headerTitleStyle = {fontSize: 20, color: 'blue', fontWeight: '500'}
    const headerBackTitle = false;
    const headerLeft = (
        <Image
            source={backicon}
            onPress={() => {
                goBack()
            }}
        />
    );
    let headerRight;
    if (state.params.headerRight) {
        headerRight = state.params.headerRight;
    }
    return {headerStyle, headerTitle, headerTitleStyle, headerBackTitle, headerLeft, header, headerRight}
};
const styles = StyleSheet.create({
    TabBarIcon: {
        backgroundColor: '#fff',
        width: 20,
        height: 20
    }
});

module.exports = APP